.elecrank-wrapper .elecrank-content .rank-item>div:after,.elecrank-wrapper .elecrank-content .rank-item>div:before,.elecrank-wrapper .elecrank-footer .elecrank-user:after,.elecrank-wrapper .elecrank-footer .elecrank-user:before {
	content: " ";
	display: table
}

.elecrank-wrapper .elecrank-content .rank-item>div:after,.elecrank-wrapper .elecrank-footer .elecrank-user:after {
	clear: both
}

.elecrank-wrapper {
	padding: 30px 0 40px 10px
}

.elecrank-wrapper.no .elecrank-header.no-list {
	border-bottom: none
}

.elecrank-wrapper.no .elecrank-header.no-list .total-txt {
	display: block;
	margin-top: 30px;
	font-size: 12px;
	color: #99a2aa
}

.elecrank-wrapper.no .elecrank-header.no-list .total-num {
	display: block;
	margin-top: 10px;
	font-size: 24px;
	font-weight: 700;
	color: #6d757a
}

.elecrank-wrapper .elecrank-header {
	position: relative;
	text-align: center;
	border: 1px solid #e5e9ef;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	height: 83px
}

.elecrank-wrapper .elecrank-header.empty {
	border-radius: 4px 4px 0 0
}

.elecrank-wrapper .elecrank-header .name {
	font-size: 18px;
	color: #00a1d6;
	background: #fff;
	position: relative;
	top: -9px;
	height: 18px;
	line-height: 18px;
	display: inline-block;
	padding: 0 14px
}

.elecrank-wrapper .elecrank-header .name:hover {
	color: #f25d8e
}

.elecrank-wrapper .elecrank-header .title {
	font-size: 12px;
	color: #222;
	line-height: 1;
	margin-top: -3px
}

.elecrank-wrapper .elecrank-header .rank-tab {
	position: relative;
	float: left;
	width: 50%;
	height: 27px;
	margin-top: 28px;
	overflow: hidden;
	color: #99a2aa;
	cursor: pointer
}

.elecrank-wrapper .elecrank-header .rank-tab .arr-up {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -6px;
	display: none;
	width: 12px;
	height: 6px;
	background: url(//static.hdslb.com/images/base/icons.png) no-repeat -856px -538px
}

.elecrank-wrapper .elecrank-header .rank-tab.active {
	color: #00a1d6;
	border-bottom: 1px solid #00a1d6
}

.elecrank-wrapper .elecrank-header .rank-tab.active .arr-up {
	display: block
}

.elecrank-wrapper .elecrank-header.no-result {
	border-bottom: none;
	height: 103px
}

.elecrank-wrapper .elecrank-header.no-result .history {
	margin-top: 30px
}

.elecrank-wrapper .elecrank-header.no-result .history .desc {
	display: block;
	font-size: 12px;
	line-height: 12px;
	color: #99a2aa
}

.elecrank-wrapper .elecrank-header.no-result .history .num {
	margin-top: 10px;
	display: block;
	font-size: 24px;
	line-height: 24px;
	font-weight: 700;
	color: #6d757a
}

.elecrank-wrapper .elecrank-icon {
	background: transparent url("//static.hdslb.com/images/base/icons.png") no-repeat 0 0;
	width: 28px;
	height: 28px;
	line-height: 28px;
	position: absolute;
	top: -5px;
	z-index: 10
}

.elecrank-wrapper .icon-battery {
	background-position: -656px -1363px;
	left: -28px
}

.elecrank-wrapper .icon-charge {
	background-position: -659px -1426px;
	right: -20px
}

.elecrank-wrapper .elecrank-content {
	padding: 24px 0 12px;
	border-bottom: 1px solid #e5e9ef;
	border-left: 1px solid #e5e9ef;
	border-right: 1px solid #e5e9ef
}

.elecrank-wrapper .elecrank-content .rank-item {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: 20px
}

.elecrank-wrapper .elecrank-content .rank-item .item-num {
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	border-radius: 4px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	background-color: #b8c0cc;
	color: #fff;
	vertical-align: middle;
	margin-left: 20px;
	margin-right: 10px
}

.elecrank-wrapper .elecrank-content .rank-item .item-avatar {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin-right: 12px;
	vertical-align: middle
}

.elecrank-wrapper .elecrank-content .rank-item .item-name {
	display: inline-block;
	width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	color: #222;
	vertical-align: middle
}

.elecrank-wrapper .elecrank-content .rank-item .item-name.is-vip {
	color: #fb7299
}

.elecrank-wrapper .elecrank-content .rank-item .item-name.is-vip:hover {
	color: #ff8dae
}

.elecrank-wrapper .elecrank-content .rank-item .msg {
	position: relative;
	width: 138px;
	word-wrap: break-word;
	word-break: break-all;
	left: 82px;
	top: -7px;
	background-color: #f4f5f7;
	border-radius: 0 4px 4px 4px;
	color: #6d757a;
	padding: 8px 10px
}

.elecrank-wrapper .elecrank-content .rank-item .msg:hover .shield-btn {
	opacity: 1;
	display: block\9
}

.elecrank-wrapper .elecrank-content .rank-item .msg .arrow {
	background: transparent url("//static.hdslb.com/images/base/icons.png") no-repeat -861px -922px;
	width: 8px;
	height: 8px;
	position: absolute;
	left: 0;
	top: -8px
}

.elecrank-wrapper .elecrank-content .rank-item .msg .shield-btn {
	position: absolute;
	width: 48px;
	height: 22px;
	line-height: 22px;
	top: 50%;
	margin-top: -12px;
	border-radius: 4px;
	background-color: #fff;
	border: 1px solid #f25d8e;
	color: #f25d8e;
	z-index: 10;
	text-align: center;
	cursor: pointer;
	right: 10px;
	opacity: 0;
	transition: opacity .4s linear;
	display: none\9
}

.elecrank-wrapper .elecrank-content .rank-item .msg .shield-btn:hover {
	color: #fff;
	background-color: #f25d8e
}

.elecrank-wrapper .elecrank-content .rank-item.first,.elecrank-wrapper .elecrank-content .rank-item.second,.elecrank-wrapper .elecrank-content .rank-item.third {
	position: relative
}

.elecrank-wrapper .elecrank-content .rank-item.first .compare-icon,.elecrank-wrapper .elecrank-content .rank-item.second .compare-icon,.elecrank-wrapper .elecrank-content .rank-item.third .compare-icon {
	top: 20px
}

.elecrank-wrapper .elecrank-content .rank-item.first .item-num,.elecrank-wrapper .elecrank-content .rank-item.second .item-num,.elecrank-wrapper .elecrank-content .rank-item.third .item-num {
	position: absolute;
	top: 28px;
	left: 20px;
	text-indent: -99999px;
	margin: 0;
	height: 24px;
	width: 17px
}

.elecrank-wrapper .elecrank-content .rank-item.first .item-avatar,.elecrank-wrapper .elecrank-content .rank-item.second .item-avatar,.elecrank-wrapper .elecrank-content .rank-item.third .item-avatar {
	float: left;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	margin-left: 20px;
	margin-right: 10px
}

.elecrank-wrapper .elecrank-content .rank-item.first .item-name,.elecrank-wrapper .elecrank-content .rank-item.second .item-name,.elecrank-wrapper .elecrank-content .rank-item.third .item-name {
	float: left;
	height: 52px;
	line-height: 52px
}

.elecrank-wrapper .elecrank-content .rank-item.first .elec-num,.elecrank-wrapper .elecrank-content .rank-item.second .elec-num,.elecrank-wrapper .elecrank-content .rank-item.third .elec-num {
	position: absolute;
	right: 19px;
	top: 16px;
	height: 20px;
	font-size: 0
}

.elecrank-wrapper .elecrank-content .rank-item.first .elec-num>span,.elecrank-wrapper .elecrank-content .rank-item.second .elec-num>span,.elecrank-wrapper .elecrank-content .rank-item.third .elec-num>span {
	display: inline-block;
	width: 36px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: middle;
	text-align: right;
	font-size: 12px;
	color: #f25d8e
}

.elecrank-wrapper .elecrank-content .rank-item.first .elec-num .elec-icon,.elecrank-wrapper .elecrank-content .rank-item.second .elec-num .elec-icon,.elecrank-wrapper .elecrank-content .rank-item.third .elec-num .elec-icon {
	display: inline-block;
	height: 20px;
	width: 16px;
	margin-left: 4px;
	background: transparent url(//static.hdslb.com/images/base/icons.png) no-repeat -664px -2326px;
	vertical-align: middle
}

.elecrank-wrapper .elecrank-content .rank-item.first {
	margin-bottom: 18px
}

.elecrank-wrapper .elecrank-content .rank-item.first .item-num {
	background: transparent url(//static.hdslb.com/images/base/icons.png) no-repeat -664px -1492px
}

.elecrank-wrapper .elecrank-content .rank-item.first .item-avatar {
	border: 2px solid #fed101
}

.elecrank-wrapper .elecrank-content .rank-item.second {
	margin-bottom: 18px
}

.elecrank-wrapper .elecrank-content .rank-item.second .item-num {
	background: transparent url(//static.hdslb.com/images/base/icons.png) no-repeat -664px -1556px
}

.elecrank-wrapper .elecrank-content .rank-item.second .item-avatar {
	border: 2px solid #aebccb
}

.elecrank-wrapper .elecrank-content .rank-item.third {
	margin-bottom: 24px
}

.elecrank-wrapper .elecrank-content .rank-item.third .item-num {
	background: transparent url(//static.hdslb.com/images/base/icons.png) no-repeat -664px -1620px
}

.elecrank-wrapper .elecrank-content .rank-item.third .item-avatar {
	border: 2px solid #d9a57d
}

.elecrank-wrapper .elecrank-content .rank-item.last {
	margin-bottom: 0
}

.elecrank-wrapper .elecrank-content.no-list {
	padding: 0;
	height: 358px
}

.elecrank-wrapper .elecrank-content.no-list .title {
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 20px;
	font-size: 12px;
	color: #6d757a
}

.elecrank-wrapper .elecrank-content.no-list .no-list-icon {
	display: block;
	width: 200px;
	height: 211px;
	margin: 0 auto;
	background: transparent url("//static.hdslb.com/images/elecrank-empty.png") center 41px no-repeat
}

.elecrank-wrapper .elecrank-content.no-list .desc {
	display: block;
	width: 200px;
	margin: 30px auto 0;
	text-align: center;
	line-height: 18px;
	color: #99a2aa
}

.elecrank-wrapper .elecrank-content.no-list .desc span {
	display: block
}

.elecrank-wrapper .elecrank-content.no-list .elec-btn {
	display: block;
	width: 160px;
	height: 40px;
	margin: 16px auto 0;
	text-align: center;
	border-radius: 4px;
	background: #00a1d6;
	font-size: 14px;
	line-height: 40px;
	color: #fff
}

.elecrank-wrapper .elecrank-content .compare-icon,.elecrank-wrapper .elecrank-footer .compare-icon {
	position: absolute;
	width: 12px;
	height: 12px;
	top: 6px;
	right: 19px;
	background: transparent url(//static.hdslb.com/images/base/icons.png) no-repeat -345px -2265px
}

.elecrank-wrapper .elecrank-content .compare-icon.up,.elecrank-wrapper .elecrank-footer .compare-icon.up {
	background: transparent url(//static.hdslb.com/images/base/icons.png) no-repeat -345px -2138px
}

.elecrank-wrapper .elecrank-content .compare-icon.down,.elecrank-wrapper .elecrank-footer .compare-icon.down {
	background: transparent url(//static.hdslb.com/images/base/icons.png) no-repeat -345px -2203px
}

.elecrank-wrapper .elecrank-footer {
	overflow: hidden;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border: 1px solid #e5e9ef;
	border-top: none
}

.elecrank-wrapper .elecrank-footer .elecrank-user {
	position: relative;
	margin: 16px 0
}

.elecrank-wrapper .elecrank-footer .elecrank-user .user-rank {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 20px;
	margin-right: 10px;
	line-height: 16px;
	text-align: center;
	background-color: #f25d8e;
	color: #fff;
	border-radius: 4px;
	vertical-align: middle
}

.elecrank-wrapper .elecrank-footer .elecrank-user .user-rank.rank-long {
	width: 24px
}

.elecrank-wrapper .elecrank-footer .elecrank-user .user-avatar {
	width: 24px;
	height: 24px;
	margin-right: 12px;
	border-radius: 50%;
	vertical-align: middle
}

.elecrank-wrapper .elecrank-footer .elecrank-user .user-name {
	display: inline-block;
	width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	color: #222;
	vertical-align: middle
}

.elecrank-wrapper .elecrank-footer .elecrank-user .user-name.is-vip {
	color: #fb7299
}

.elecrank-wrapper .elecrank-footer .elecrank-user .user-name.is-vip:hover {
	color: #ff8dae
}

.elecrank-wrapper .elecrank-footer .elecrank-user.no {
	display: none
}

.elecrank-wrapper .elecrank-footer .nav-wrap {
	margin: 20px auto
}

.elecrank-wrapper .elecrank-footer .nav-item {
	float: left;
	border-radius: 5px;
	background: #b8c0cc;
	margin-right: 6px;
	cursor: pointer;
	width: 16px;
	height: 10px
}

.elecrank-wrapper .elecrank-footer .nav-item:hover {
	background: #f25d8e
}

.elecrank-wrapper .elecrank-footer .nav-item.active {
	width: 30px;
	background: #f25d8e
}

.elecrank-wrapper .elecrank-footer .nav-item.last {
	margin-right: 0
}

.elecrank-wrapper .elecrank-empty-content {
	border: 1px solid #e5e9ef;
	border-radius: 0 0 4px 4px;
	margin-top: -1px;
	height: 230px;
	position: relative;
	background: transparent url("//static.hdslb.com/images/elecrank-empty.png") center 20px no-repeat
}

.elecrank-wrapper .elecrank-empty-content .title {
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 20px;
	font-size: 12px;
	color: #6d757a
}

.elecrank-btn {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 131px;
	height: 38px;
	border-radius: 20px;
	border: 1px solid #f37071;
	font-size: 18px;
	font-weight: 700;
	color: #f37071;
	text-align: center;
	line-height: 38px;
	cursor: pointer;
	padding-left: 15px
}

.elecrank-btn.birth {
	border-color: #f25d8e;
	color: #f25d8e
}

.elecrank-btn.birth .birth-tips {
	position: absolute;
	top: -30px;
	right: -55px;
	width: 122px;
	height: 25px;
	color: #fff;
	font-weight: 400;
	line-height: 20px;
	font-size: 12px;
	background: url("//static.hdslb.com/images/base/elec-birth-tip-bg.png") no-repeat
}

.elecrank-btn .elecrank-bg {
	position: absolute;
	top: -20px;
	left: -50%;
	margin-left: 40px;
	width: 80px;
	height: 80px
}

.elec-shield {
	position: absolute;
	width: 200px;
	height: 126px;
	border: 1px solid #ccd0d7;
	background-color: #fff;
	box-shadow: 2px 2px 4px rgba(0,0,0,.2);
	padding: 24px 20px 0;
	z-index: 100;
	border-radius: 4px;
	text-align: center
}

.elec-shield .shield-close {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 18px;
	height: 18px;
	background: transparent url("//static.hdslb.com/images/base/icons.png") no-repeat -471px -535px;
	cursor: pointer
}

.elec-shield .shield-close:hover {
	background-position: -535px -535px
}

.elec-shield .shield-title {
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 700;
	height: 18px;
	line-height: 18px
}

.elec-shield .shield-content {
	color: #99a2aa;
	margin-bottom: 16px;
	height: 36px;
	line-height: 18px
}

.elec-shield .shield-btn {
	width: 66px;
	height: 22px;
	line-height: 22px;
	background-color: #fff;
	border: 1px solid #ccd0d7;
	color: #222;
	cursor: pointer;
	border-radius: 4px;
	display: inline-block
}

.elec-shield .shield-btn.ok {
	margin-right: 20px
}

.elec-shield .shield-btn:hover {
	border-color: #f25d8e;
	background-color: #f25d8e;
	color: #fff
}

.widescreen .bill-btn-wrap {
	position: absolute;
	padding-left: 73px;
	right: 224px;
	width: 129px;
	height: 60px;
	margin-top: 14px
}

.widescreen .bill-btn-wrap .bill-icon {
	position: absolute;
	left: 0;
	top: 0;
	width: 66px;
	height: 60px;
	background: transparent url("//static.hdslb.com/images/base/bill-626-l.jpg") no-repeat
}

.widescreen .bill-btn-wrap .bill-btn {
	display: block;
	margin-top: 12px;
	color: #0497c8;
	font-size: 14px;
	line-height: 20px;
	text-align: left
}

.widescreen .bill-btn-wrap .bill-btn .arrow {
	display: inline-block;
	margin-top: 4px;
	margin-left: 6px;
	width: 5px;
	height: 12px;
	background: url("//static.hdslb.com/images/base/arrow-626.jpg") no-repeat
}

.widescreen .bill-btn-wrap .desc {
	display: block;
	color: #6d757a
}

.bill-btn-wrap {
	position: absolute;
	padding: 0;
	right: 208px;
	width: 129px;
	height: 60px;
	margin-top: 13px
}

.bill-btn-wrap .bill-icon {
	position: static;
	margin: 0 auto;
	width: 42px;
	height: 38px;
	background: transparent url("//static.hdslb.com/images/base/bill-626-s.jpg") no-repeat
}

.bill-btn-wrap .bill-btn {
	display: block;
	margin: 0;
	color: #0497c8;
	font-size: 12px;
	text-align: center
}

.bill-btn-wrap .bill-btn .arrow,.bill-btn-wrap .desc {
	display: none
}